<head>
    <meta charset="UTF-8">
    <title>组件管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript"
            src="../lib/vue/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/global.js"></script>
    <script type="text/javascript" src="../js/store.js"></script>
    <script type="text/javascript" src="../js/cookies.js"></script>
    <script src="../lib/vue/vue.min.js"></script>
    <script src="../lib/vue/axios.min.js"></script>
</head>

<body class="layui-anim layui-anim-up" onload="checkLogin ()">
<div id="component">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href='javascript:parent.location.href="../index.html"'>基本信息管理</a>
        <a>平台组件信息管理</a>
        <a>
          <cite>组件列表</cite></a>
      </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
        <xblock>
            <div class="layui-row">
                <div class="layui-col-xs4 admin-permission" v-show="userType == 4">
                    <button class="layui-btn" onclick="x_admin_show('添加组件','./component-add.html',700,500)"><i
                            class="layui-icon"></i>添加组件
                    </button>
                </div>
                <div class="layui-col-xs8">
                    <div class="layui-inline" style="width: 200px;">
                        <input id="searchKey" type="text" name="searchKey" placeholder="请输入组件名称关键字查询"
                               autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn" data-type="reload"><i
                            class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </xblock>
        <table id="componentList" lay-filter="componentList"></table>
    </div>
    <input hidden id="editComponent" value=""/>
</div>
<script type="text/html" id="componentBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
    {{#  if(parseInt(getCookie('userType'))===4){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-even lay-event="delete">删除</a>
    {{#  } }}
    {{#  if(parseInt(getCookie('userType'))===3 && getCookie('componentIds').indexOf(d.id)>-1 ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-even lay-event="delete">删除</a>
    {{#  } }}
</script>
<script>
    layui.use(['table', 'upload'], function () {
        var table = layui.table
        var upload = layui.upload;
        //第一个实例
        var componentTable = table.render({
            elem: '#componentList'
            , url: _hostUrl + '/cmsComponents/page' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'componentName', title: '组件名称', width: 300, align: 'center', event: 'detail'}
                , {field: 'componentDesc', title: '组件描述信息', width: 500, align: 'center', event: 'detail'}
                , {title: '操作', fixed: 'right', align: 'center', toolbar: '#componentBar'}
            ]], request: {
                pageName: 'pageIndex' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , response: {
                statusName: 'responseCode' //数据状态的字段名称，默认：code
                , statusCode: 200 //成功的状态码，默认：0
                , msgName: 'responseMsg' //状态信息的字段名称，默认：msg
                , rootName: 'data'
                , countName: 'totalRecord'
                , dataName: 'resultList'
            },
        })
        //加入搜索功能
        var $ = layui.$, active = {
            reload: function () {
                componentTable.reload({
                    where: {
                        componentName: $("#searchKey").val()
                    }
                })
            }
        };
        $('.layui-col-xs8 .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听工具条
        table.on('tool(componentList)', function (obj) {
            var data = obj.data
            if (obj.event === 'delete') {
                layer.confirm('确定删除组件[<span style="color: red">' + data.componentName + '</span>]吗？删除后将同步删除该组件关联的所有信息，请谨慎操作！', function (index) {
                    $.deleteJSON(_hostUrl + "/cmsComponent/" + data.id
                        , null, function (res) {
                            if (res.responseCode == 204) {
                                layer.msg('删除成功', {
                                    icon: 1,
                                    time: 2000
                                });
                                componentTable.reload({
                                    where: {
                                        pageIndex: 1
                                    }
                                })
                            } else {
                                layer.msg(res.responseMsg, {icon: 2, time: 1500})
                            }
                        })
                })
            } else if (obj.event === 'edit') {
                $("#editComponent").val(JSON.stringify(data))
                x_admin_show('修改组件', './component-edit.html')
            } else if (obj.event === 'detail') {
                $("#editComponent").val(JSON.stringify(data))
                x_admin_show('组件详情', './component-detail.html', 600, 550, true)
            }
        })
    })
</script>

<script>
    let vm = new Vue({
        el: '#component',
        data() {
            return {
                userType: 0
            }
        },
        //渲染之前加载cookie数据
        beforeMount() {
            this.userType = getCookie('userType')
        }
    })
</script>
</body>

